<template>
	<view class="page">
		<view class="list" v-if="commentList.length > 0">
			<view class="comment-item" v-for="(item, index) in commentList" :key="index">
				<view class="comment-userInfo">
					<view class="username">{{item.nickName || ''}}</view>
					<view class="create-time">{{item.createTime || ''}}</view>
				</view>
				<view class="comment-score">
					<uni-rate :readonly="true" :size="12" :margin="3" :value="item.level" :allow-half="true"></uni-rate>
				</view>
				<view class="comment-content">{{item.commentContent}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		escortCommentList
	} from '@/apis/request.js'

	export default {
		data() {
			return {
				id: '',
				page: 1,
				total: 0,
				commentList: []
			};
		},
		onLoad(options) {
			this.id = options.id;
			this.init()
		},
		onPullDownRefresh() {
			this.init();
		},
		onReachBottom() {
			if (this.commentList.length < this.total) {
				this.getList();
			}
		},
		methods: {
			init() {
				this.page = 1;
				this.total = 0;
				this.commentList = [];
				this.getList();
			},
			getList() {
				escortCommentList({
					escortId: this.id,
					pageNo: this.page,
					pageSize: 10,
					sortType: 1,
					status: 0
				}).then(res => {
					if (this.page == 1) {
						this.total = res.total;
						this.commentList = res.records || [];
					} else {
						this.commentList = this.commentList.concat(res.records || [])
					}
					if (this.commentList.length < this.total) {
						this.page++;
					}
				}).finally(() => {
					uni.stopPullDownRefresh();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.list {
			.comment-item {
				border-bottom: 2rpx solid #f2f2f2;
				padding: 30rpx;

				.comment-userInfo {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.username {
						color: #020202;
						font-size: 30rpx;
					}

					.create-time {
						color: #999999;
						font-size: 22rpx;
					}
				}

				.comment-score {
					.score-icon {
						width: 22rpx;
						height: 22rpx;
						margin-right: 8rpx;
					}
				}

				.comment-content {
					color: #666666;
					font-size: 28rpx;
					line-height: 42rpx;
				}
			}
		}
	}
</style>